<!-- 企业端头部 -->
<template>
  <div>
    <el-header style="height: 117px;padding: 0;">
      <div class="headerbanner">
        <!--        <img class="imagee_1" v-if="logo" referrerpolicy="no-referrer" :src="logo" @click="index()" /> -->
        <img class="imagee_11" src="../assets/images/ccrcw.png" alt="" @click="index()" />
        <div class="headsculpture">
          <img class="image_2" referrerpolicy="no-referrer" :src="avatar" />
          <div class="text_6">{{ base_info.username }}</div>
          <div class="dropdown-menu" v-if="headsculptureshow">
            <ul>
              <!-- <li @click="toindex">首页</li> -->
              <!-- <li @click="toeEditPersonal">账号设置</li> -->
              <li @click="logout">退出登录</li>
            </ul>
          </div>
        </div>
      </div>
    </el-header>
  </div>
</template>

<script>
import { SkeletonItem } from 'element-ui';
// import { mapState } from 'vuex';

export default {
  data() {
    return {
      // 初始显示图片  
      showPlaceholder: true,
      download: false,
      headsculptureshow: true,
      // isListVisible: true, // 控制列表的显示与隐藏
      avatar: "",
      job_notice_count: 0,
      elbadge: true,
      avatar: '',
      username: '',
      base_info: '',
      logo: '',
      interval: null
    };
  },
  // computed: {
  //   ...mapState(['IndexBase']),
  //   logo() {
  //     return this.IndexBase ? this.IndexBase.logo : null;
  //   }
  // },
  async created() {
    const avatar = localStorage.getItem("avatar user_logo"); //用户头像
    this.avatar = avatar;

    const cachedDataStr = localStorage.getItem("zp_index_base");
    if (cachedDataStr) {
      const cachedData = JSON.parse(cachedDataStr);
      this.logo = cachedData.IndexBase.logo
    }

    // await this.$store.dispatch('fetchIndexBase');
    if (this.logo) {
      this.showPlaceholder = false;
    }
  },
  mounted() {
    const token = localStorage.getItem('token')
    if (token) {
	  this.zpappnotice()
      this.interval = setInterval(() => {
        this.zpappnotice()
      }, 10000);
    }
  },
  methods: {
    index() {
      this.$router.push('./enterpriseIndex');
    },
    //获取消息基本信息
    async zpappnotice() {
      const res = await this.$service.get({
        url: "/api/zp/v1/zpapp_comp_base",

      });
      if (res.code == 1) {
        this.job_notice_count = res.info.record_count;
        this.base_info = res.info.base_info
      }
      if (res.code != -1 && res.code != 1) {
        this.$message(res.msg);
      }
    },
    tochat() {
      window.open('#/messageUnset');//chat

    },
    toeEditPersonal() {
      this.$router.push("/eEditPersonal");
    },
    logout() {
      localStorage.removeItem("token");
      localStorage.removeItem("username");
      localStorage.removeItem("is_comp");
      localStorage.removeItem("avatar user_logo");
      localStorage.removeItem("user_id");
      this.$message({ message: "退出登录成功", type: "success" });
      this.$router.push("/login");
    },
    toindex() {
      this.$router.push("/enterpriseIndex");
    },
    toindexi() {
      this.$router.push("/index");
    },
    startRefreshing() {
      // 设置定时器，每1秒调用一次zpappnotice方法  

      console.log('111');
    },
  },
  beforeDestroy() {
    clearInterval(this.interval)
  },
  components: {

  }
};
</script>

<style scoped>
* {
  list-style: none;
}

.dropdown-menu {
  display: none;
  position: absolute;
  top: -5px;
}

.headsculpture:hover .dropdown-menu {
  display: block;
}

ul {
  z-index: 999;
  width: 159.14px;
  position: absolute;
  top: 90px;
  border-radius: 5px;
  padding: 5px 0;
  box-sizing: border-box;
  box-shadow: 0 5px 20px 0 hsla(0, 0%, 78.8%, 0.6);
  background-color: #fff;
}

li {
  width: 159.14px;
  height: 40px;
  text-align: center;
  line-height: 40px;
  background-color: #fff;
}

li:hover {
  background-color: #f3f3f3;
}

.imagee_1 {
  width: 220px;
  height: 62px;
  margin: 31px 0 0 0;
  background: #fff;
  position: absolute;
  left: 0;
  top: 0;
}

.imagee_11 {
  width: 305px;
  height: 62px;
  margin: 31px 0 0 0;
  background: #fff;
  position: absolute;
  left: 0;
  top: 0;
}

.headerbanner {
  width: 1200px;
  height: 117px;
  background-color: #fff;
  display: flex;
  margin: 0 auto;
  justify-content: space-between;
  position: relative;
}

.header span {
  background-color: #fff;
}

.image_1 {
  width: 221px;
  height: 51px;
  /* margin: 31px 0 0 356px; */
  margin-top: 31px;
  background-color: #fff;
  margin-right: 589px;
}

.text_1 {
  width: 32px;
  height: 24px;
  overflow-wrap: break-word;
  color: rgba(0, 0, 0, 1);
  font-size: 16px;
  font-family: PingFangSC-Regular;
  font-weight: normal;
  text-align: right;
  white-space: nowrap;
  line-height: 24px;
  background-color: #fff;
}

.text_2 {
  width: 64px;
  height: 24px;
  overflow-wrap: break-word;
  color: rgba(0, 0, 0, 1);
  font-size: 16px;
  font-family: PingFangSC-Regular;
  font-weight: normal;
  text-align: right;
  white-space: nowrap;
  line-height: 24px;
  background-color: #fff;
}

.download img,
.message img {
  width: 23px;
  margin-right: 10px;
  background: #fff;
  position: relative;
  top: 5px;
}

.download,
.message {
  width: 97px;
  height: 117px;
  /* padding-top: 43px; */
  box-sizing: border-box;
  background: #fff;
  position: absolute;
  right: 275px;
}

.messagea {
  position: absolute;
  right: 445px;
  transition: color 0.3s;
}

.messagea:hover {
  color: #e53b23;
}

.headsculpture {
  background: #fff;
  position: absolute;
  right: 0px;
  padding-left: 11px;
  box-sizing: border-box;
  height: 117px;
}

.text_3 {
  width: 64px;
  height: 24px;
  overflow-wrap: break-word;
  color: rgba(0, 0, 0, 1);
  font-size: 16px;
  font-family: PingFangSC-Regular;
  font-weight: normal;
  text-align: right;
  white-space: nowrap;
  line-height: 24px;
  margin: 49px 0 0 52px;
}

.text_4 {
  width: 64px;
  height: 24px;
  overflow-wrap: break-word;
  color: rgba(0, 0, 0, 1);
  font-size: 16px;
  font-family: PingFangSC-Regular;
  font-weight: normal;
  text-align: right;
  white-space: nowrap;
  line-height: 24px;
  margin: 49px 0 0 52px;
}

.text_5 {
  width: 153px;
  height: 24px;
  overflow-wrap: break-word;
  color: rgba(217, 4, 3, 1);
  font-size: 16px;
  font-family: PingFangSC-Regular;
  font-weight: normal;
  text-align: right;
  white-space: nowrap;
  line-height: 24px;
  margin: 49px 0 0 83px;
}

.image_2 {
  width: 54px;
  height: 54px;
  margin: 36px 0 0 0;
  background-color: #fff;
}

.text_6 {
  display: inline-block;
  width: 200px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  height: 24px;
  overflow-wrap: break-word;
  color: rgba(0, 0, 0, 1);
  font-size: 16px;
  font-family: PingFangSC-Regular;
  font-weight: normal;
  text-align: left !important;
  white-space: nowrap;
  line-height: 24px;
  margin: 51px 0 0 10px;
  position: relative;
  top: -22px;
  background-color: #fff;
}

::v-deep .item .el-button {
  padding: 0;
  border: none !important;
  height: 24px;
  margin: 49px 0 0 0;
}

::v-deep .item .el-badge__content.is-fixed {
  top: 49px;
  background-color: #e53b23;
}

::v-deep .item .el-button span {
  font-family: PingFangSC, PingFang SC;
  font-weight: 400;
  font-size: 16px;
  color: #000000;
  line-height: 24px;
  text-align: left;
  font-style: normal;
  text-transform: none;
  background-color: #fff;
}
</style>